<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <link rel="stylesheet" type="text/css" href="/static/css/fabmap.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
{#    <script src="/static/js/jquery.min.js" type="text/javascript"></script>#}
{#    <script src="/static/js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>#}
<script>
function start_axis(event, floor) {
 event = event || window.event;
 var x = event.offsetX || event.layerX;
 var y = event.offsetY || event.layerY;
 if(color_tag1 == 1){
     document.getElementById('start_point').value = (x+","+y);
     document.getElementById('start_floorL'+ floor).checked = true;
     get_axis_state1();
     show('startpic');
 }
}
function end_axis(event, floor) {
 event = event || window.event;
 var x = event.offsetX || event.layerX;
 var y = event.offsetY || event.layerY;
 if(color_tag2 == 1){
     document.getElementById('end_point').value = (x+","+y);
     document.getElementById('end_floorL'+ floor).checked = true;
     get_axis_state2();
     show('endpic');
 }
}
var color_tag1 = 0;
var color_tag2 = 0;
var colors1 = [["#ffffff","点我"],["#00ffff","点图"]];
var colors2 = [["#ffffff","点我"],["#00ffff","点图"]];
function get_axis_state1() {
    if(color_tag2 == 0)
    {
        color_tag1 = 1 - color_tag1;
        document.getElementById('getBtn1').style.backgroundColor = colors1[color_tag1][0];
        document.getElementById('getBtn1').value = colors1[color_tag1][1];
    }
}
function get_axis_state2() {
    if(color_tag1 == 0 )
    {
        color_tag2 = 1 - color_tag2;
        document.getElementById('getBtn2').style.backgroundColor = colors2[color_tag2][0];
        document.getElementById('getBtn2').value = colors2[color_tag2][1];
    }
}

function show(id){
    var img = document.getElementById(id);
    var wid = img.width;
    var hig = img.height;
    img.style.left = event.pageX - wid/2 + "px";
    img.style.top  = event.pageY - hig + "px";
    img.style.visibility = "visible";
}

</script>
</head>
<body onload="">
<div id="nav">
    <h3>请输入坐标:</h3>
    <form action="{% url 'fabmap' %}" method="post" autocomplete="off">
        <div class="marb8 {% if login_form.errors.username %}errorput{% endif %}">
            <label>起点楼层</label>
            <input type="radio" id="start_floorL20" name="start_floor" value="L20" />L20
            <input type="radio" id="start_floorL40" name="start_floor" value="L40" />L40
        </div>
        <div class="marb8 {% if login_form.errors.username %}errorput{% endif %}">
            <label>起点坐标</label>
            <input name="start_point" id="start_point" type="text" placeholder="例:100,100" />
            <input id="getBtn1" type="button" name="getBtn" value="点我" onclick="get_axis_state1()" />
        </div>
        <div class="marb8 {% if login_form.errors.username %}errorput{% endif %}">
            <label>终点楼层</label>
            <input type="radio" id="end_floorL20" name="end_floor" value="L20" />L20
            <input type="radio" id="end_floorL40" name="end_floor" value="L40" />L40
        </div>
        <div class="marb8">
            <label>终点坐标</label>
            <input name="end_point" id="end_point" type="text" placeholder="例:200,200" />
            <input id="getBtn2" type="button" name="getBtn" value="点我" onclick="get_axis_state2()" />
        </div>
         <input id="loginBtn" type="submit" value="立即查询 > " />
        {% csrf_token %}
    </form>
    <form action="{% url 'fabmap' %}" method="get" autocomplete="off">
        <input id="calBtn" type="submit" name="purpose" value="重算路径" />
        {% csrf_token %}
    </form>
    <div>
        <h3>路径轨迹:</h3>
        <p id="test">{{ msg1 }}</p>
        <p>{{ path_node }}</p>
    </div>
</div>
<label class = floor>&nbsp;&nbsp;L40</label>
<div id="mapL40" onClick="start_axis(event,'40'); end_axis(event,'40')">
    <svg width="100%" height="100%" version="1.1">
        {% for one_eq_vertex in l40_vertex %}<polygon points="{{ one_eq_vertex }}" style="fill:#cccccc;stroke:#000000;stroke-width:0.3; opacity: 0.5"/>{% endfor %}
        <polyline points="{{ path_node }}" style="fill:None;stroke:red;stroke-width:2"/>
    </svg>
</div>
<label class = floor>&nbsp;&nbsp;&nbsp;L20</label>
<div id="mapL20" onClick="start_axis(event,'20'); end_axis(event,'20')">
    <svg width="100%" height="100%" version="1.1">
        {% for one_eq_vertex in l20_vertex %}<polygon points="{{ one_eq_vertex }}" style="fill:#cccccc;stroke:#000000;stroke-width:0.3;opacity: 0.5"/>{% endfor %}
        <polyline points="{{ path_axis }}" style="fill:None;stroke:red;stroke-width:2"/>
    </svg>
</div>
<img src="/static/image/start.png" id="startpic" style="visibility:hidden;position:absolute;width: 50px;height: 50px;">
<img src="/static/image/end.png" id="endpic" style="visibility:hidden;position:absolute;width: 50px;height: 50px;">
</body>
</html>